import { Button, Form, Input, Popover, Select } from "antd";
import { FC, useEffect, useState, } from "react";
import { FormBox} from "../../style";
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { handlegetGoodList, ISelectList } from "../../../api";
import { ShengDiv, ShengTanchaung } from "../../../../../assets/style/ShengTanchaung";
import { licensePlateAbbreviations } from "../../../../../assets/data";




const SearchMoudle: FC<{
    handleSearchCallback: (values?: any) => void;
}> = ({
    handleSearchCallback
}) => {
        const [departmentData, setDepartmentData] = useState<ISelectList[]>([]);
        const [carSheng, setCarSheng] = useState('陕'); // 省
        const [carShengShow, setCarShengShow] = useState(false); // 省弹窗显示与否
        const [form] = Form.useForm();

        const ShengHtml = <ShengTanchaung>
            {
                licensePlateAbbreviations.map((item) => {
                    return <div
                        key={item}
                        className={carSheng === item ? 'li-car active' : 'li-car'}
                        onClick={() => {
                            setCarSheng(item);
                        }}
                    >
                        {item}
                    </div>
                })
            }
        </ShengTanchaung>

        const handleSearch = async () => {
            const values = await form.validateFields();
            if(values.carNum) {
                values.carNum = carSheng + values.carNum
            }
            
            handleSearchCallback(values)

        }
        const handleReset = () => {
            form.resetFields();
            handleSearchCallback();
        }
        const prefixSelector = () => {
            return (<div style={{ display: 'flex', alignItems: 'center' }}>
                <Form.Item name={['carColor']} noStyle>
                    <Select
                        style={{ width: '6.5rem' }}
                        options={[
                            { value: "蓝", label: "蓝" },
                            { value: "黄", label: "黄" },
                            { value: "绿", label: "绿" },
                            { value: "黑", label: "黑" },
                        ]}>
                    </Select>
                </Form.Item>
                <Popover content={ShengHtml} trigger="click" onOpenChange = {(open) => {
                    setCarShengShow(open)
                }}>
                    <ShengDiv>
                        <span  style={{color: !carShengShow ? 'rgba(0, 0, 0, 0.88)' : 'rgba(0, 0, 0, 0.45)'}} >{carSheng}</span><span className="iconfont" style={{ fontSize: '1.2rem', color: 'rgba(0, 0, 0, 0.88)' }}>&#xe661;</span>
                    </ShengDiv>
                </Popover>

            </div>

            );
        }

        useEffect(() => {
            handlegetGoodList().then(
                res => {
                    setDepartmentData(res)
                }
            )
        }, [])

        return (
            <FormBox>
                <Form
                    layout="inline"
                    form={form}
                    colon={false}
                    //carColor 默认为黄
                    initialValues={{ carColor: "黄", carSheng: '陕' }}
                >
                    <Form.Item name='carNum'
                    >
                        <Input
                            style={{ width: '27.3rem' }}
                            placeholder="请输入车牌号"
                            addonBefore={prefixSelector()}
                        />
                    </Form.Item>
                    <Form.Item name="good">
                        <Select
                            placeholder="请选择货品"
                            style={{ width: '27.3rem' }}
                            options={departmentData}>
                        </Select>
                    </Form.Item>
                    <Form.Item name="telPhone">
                        <Input
                            style={{ width: '27.3rem' }}
                            placeholder="请输入联系电话"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button
                            style={{ marginRight: "2rem" }}
                            icon={<SearchOutlined />}
                            type="primary"
                            onClick={() => { handleSearch() }}
                        >
                            查询
                        </Button>
                        <Button
                            icon={<ReloadOutlined />}
                            style={{ marginRight: "2rem" }}
                            onClick={() => handleReset()}
                        >
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </FormBox>
        )
    }

export default SearchMoudle;